<template>
  <DraggableModal :visible="props.showModal" title="记录详情" width="1200px" @cancel="modalCancelFn">
    <SuperTable
      ref="superTableRef"
      border
      height="600"
      :search="false"
      :pager="false"
      :show-card-header="false"
      align="center"
      :columns="columns"
      :data-request="fetchData"
      :scroll-y="{}"
      :export-config="{}"
      :toolbar="{}"
    />
    <template #footer>
      <Popconfirm title="确认处理本次提醒?" :disabled="props.data?.status === 4" @confirm="handleOkFn">
        <Button type="success" :disabled="props.data?.status === 4"> 处理 </Button>
      </Popconfirm>
    </template>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import type { TableColumnItem } from './columns';
import { baseColumns } from './columns';
import { ref, watch } from 'vue';
import { message, Popconfirm } from 'ant-design-vue';
import Button from '@/framework/components/basic/button/button.vue';
import { warnDetail, warnHandle } from '@/modules/smart-reminders/api';

/**
 * const
 */
const props = defineProps<{
  data: any;
  showModal: boolean;
}>();
watch(
  () => props.data,
  () => {
    refreshTableFn();
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean);
  (e: 'modalOk'): void;
}>();

/**
 * modal
 */
const handleOkFn = async () => {
  let params = {
    status: 4,
  };
  await warnHandle(props.data.id, params);
  message.success('操作成功!');
  emits('modalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  emits('update:showModal', false);
};
/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = baseColumns;
const fetchData = async () => {
  const res = await warnDetail(props.data?.id);
  return {
    data: res.result,
    pageIndex: 1,
    pageSize: 1000000,
    total: 10000000,
  };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
</script>

<style scoped lang="less"></style>
